import 'dart:async';

import 'package:car_map/widget/load_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

///汽车维修
class RepairPage extends StatefulWidget {
  @override
  _repairState createState() => _repairState();
}

class _repairState extends State<RepairPage> {
  int index = 1; //第一张图片
  int count = 72; //图片的总数
  final int DIRECTION_ANTICLOCKWISE = 1; // 逆时针
  final int DIRECTION_CLOCKWISE = -1; // 顺时针
  int direction; //记录角度
  Timer _timer; //计时器  作为自动旋转
  int sliderNum=1;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    direction = DIRECTION_CLOCKWISE;
//    _startTimer();
  }

  //开始计时器
  _startTimer() {
    _timer = Timer.periodic(new Duration(milliseconds: 90), (timer) {
//      setState(() {});
      if (direction == DIRECTION_ANTICLOCKWISE) {
        if (index > 1) {
          index--;
          return;
        }
        //重新回到最后一张图
        index = count;
      } else if (direction == DIRECTION_CLOCKWISE) {
        if (index < count) {
          index++;
          return;
        }
        //重新回到第一张图片
        index = 1;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('360°展示汽车'),
      ),
      body: Center(
          child: SingleChildScrollView(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  GestureDetector(
                    onTap: () => _cancelTimer(),
                    onPanStart: (e) => _cancelTimer(),
                    onPanUpdate: (e) => _onTouchImage(e),
                    // 在触屏结束之后，恢复自动旋转
                    onPanEnd: (e) => _startTimer(),
                    child: LoadAssetImage(
                      'square/repaircar/product00${index}',
                      fit: BoxFit.cover,
                      width:ScreenUtil().setWidth(750.0),
                      height: ScreenUtil().setHeight(750.0),
                    ),
                  ),
                  
                  Container(
                    width: ScreenUtil().setWidth(750.0),
                    height: ScreenUtil().setHeight(170.0),
                    padding: EdgeInsets.all(10.0),
                    child: Column(
                      children: <Widget>[
                        Container(
                          child: Text('手动旋转展示视图'),
                        ),
                        Row(
                          children: <Widget>[
                            Text('1°'),
                            Expanded(
                                flex: 1,
                                child: Slider(
                                  value: sliderNum.floorToDouble(),
                                  divisions: 72*5,//步长
                                  label:'${sliderNum}',
                                  onChanged: (int){
                                    setState(() {
                                      sliderNum=int.floor();
                                      index=(sliderNum/5).floor();
                                    });
                                  },min: 1,max: 360,)),
                            Text('360°'),
                          ],
                        ),
                      ],
                    )
                  )
                ]),
          )),
    );
  }

  void _onTouchImage(e) {
    if (e.delta.dx < 0) {
      direction = DIRECTION_CLOCKWISE;
    }

    if (e.delta.dx > 0) {
      direction = DIRECTION_ANTICLOCKWISE;
    }

    setState(() {
      index -= e.delta.dx.toInt();
    });

    // 防止取到不存在的图片报错
    if (index < 1) index = 72; //当index<1 的时候显示最后一张图片
    if (index > count) index = 1; //当index>count 的时候显示第一张图片
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    //注销定时任务
    _cancelTimer();
  }

  void _cancelTimer() {
    _timer?.cancel();
  }
}
